<template>
  <el-dialog :visible="goodsVisible"
             title="选择货物"
             :before-close="close"
             append-to-body>
    <el-form ref="form"
             inline
             :model="form"
             label-width="80px">
      <el-form-item label="物品名称">
        <el-input v-model="form.goodsName"
                  placeholder="请选择物品名称"></el-input>
      </el-form-item>
      <el-form-item label="物料编码">
        <el-input v-model="form.barcode"
                  placeholder="请选择物料编码"></el-input>
      </el-form-item>
      <el-button type="primary"
                 @click="pageNo = 1; search();">查询</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form>
    <el-table ref="multipleTable"
              :class="concealClass"
              :data="tableData"
              height="500px"
              @row-click="handleTableRow"
              @selection-change="handleSelectionChange">
      <el-table-column type="index"
                       width="50"> </el-table-column>
      <el-table-column type="selection"
                       width="55"> </el-table-column>
      <template v-for="(column, index) in tableColumn">
        <el-table-column v-show="tableData.length > 0"
                         :key="index"
                         :prop="column.name"
                         v-bind="column" />
      </template>
    </el-table>
    <el-pagination v-show="tableColumn.length > 0"
                   background
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   :page-sizes="pageSizeOptions"
                   :page-size.sync="pageSize"
                   :current-page.sync="pageNo"
                   @size-change="search"
                   @current-change="search">
    </el-pagination>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="primary"
                 @click="container">确定</el-button>
      <el-button type="default"
                 @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { goods } from "@/api/index";
export default {
  name: "SelectMoreGoods",
  components: {},
  props: {
    goodsVisible: Boolean,
    customerId: {
      type: [String, Number],
      default: () => null
    },
    customerName: {
      type: [String, Number],
      default: () => null
    },
    signType: {
      type: String,
      required: false,
      default: '2'
    }
  },
  data () {
    return {
      total: 0,
      pageSizeOptions: [10, 20, 50, 100],
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      form: { status: 1, barcode: "", goodsName: "" },
      selectList: [],
      tableColumn: [
        {
          label: "物品编码",
          name: "barcode"
        },
        {
          label: "物品名称",
          name: "name"
        },
        {
          label: "物品类型",
          name: "type"
        },
        {
          label: "价值(元)",
          name: "value"
        },
        {
          label: "数量单位",
          name: "unit"
        },
        {
          label: "规格(厘米)",
          name: "spec"
        },
        {
          label: "体积(立方米)",
          name: "volume"
        },
        {
          label: "重量(公斤)",
          name: "netWeight"
        }
      ]
    };
  },
  computed: {
    mergedFilterData () {
      return {
        page: this.pageNo,
        size: this.pageSize,
        customerId: this.customerId,
        ...this.form
      };
    },
    concealClass () {
      return this.signType === '1' ? 'conceal-btn' : ''
    }
  },
  created () {
    this.search();
  },
  methods: {
    close () {
      this.$emit("update:goodsVisible", false);
    },
    // 多选
    handleSelectionChange (data) {
      this.selectList = data;
      if (data.length > 1 && this.signType === '1') {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(data.pop());
      }
    },
    // 行多选
    handleTableRow (row) {
      if (this.signType === '1') {
        // 单选选中行
        const isSelected = this.selectList[0] == row;
        this.selectList = isSelected ? [] : [row];
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(row, !isSelected);
      } else {
        // 多选选中行
        const isSelected = this.selectList.some(item => item.goodsId === row.goodsId);
        if (!isSelected) {
          // 选择
          this.selectList.push(row);
          this.$refs.multipleTable.toggleRowSelection(row, true);
        } else {
          // 取消
          const finalList = this.selectList.filter(item => item.goodsId !== row.goodsId);
          this.selectList = finalList;
          this.$refs.multipleTable.toggleRowSelection(row, false);
        }
      }
    },
    // 查询
    async search () {
      let { code, data } = await goods.search(this.mergedFilterData);
      if (code === 0) {
        this.tableData = data.records;
      }
      this.total = data.total;
    },
    container () {
      if (this.selectList.length > 0) {
        this.$emit("selectMoreGoods", this.selectList);
        this.$emit("update:goodsVisible", false);
      } else {
        this.$message.warning("请选择物品");
      }
    },
    resetForm () {
      this.form = { status: 1, barcode: "", goodsName: "" };
      this.search()
    }
  }
};
</script>

<style scoped>
.conceal-btn thead .el-table-column--selection .cell {
  display: none;
}
</style>